<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <title>frequency decoder ~ Unobtrusive JavaScript datePicker (calendar) widgit demo</title>         
        <script type="text/javascript" src="./js/datepicker.js"></script>
        <link href="./css/demo.css"       rel="stylesheet" type="text/css" />
        <link href="./css/datepicker.css" rel="stylesheet" type="text/css" />
        
<script type="text/javascript">
// <![CDATA[     

// A quick test of the setGlobalVars method 
datePickerController.setGlobalVars({"split":["-dd","-mm"]});

/* 

   The following function dynamically calculates Easter Monday's date.
   It is used as the "redraw" callback function for the second last calendar on the page
   and returns an empty object.
   
   It dynamically calculates Easter Monday for the year in question and uses
   the "adddisabledDates" method of the datePickercontroller Object to
   disable the date in question.
   
   NOTE: This function is not needed, it is only present to show you how you
   might use this callback function to disable dates dynamically!
   
*/
function disableEasterMonday(argObj) { 
        // Dynamically calculate Easter Monday - I've forgotten where this code 
        // was originally found and I don't even know if it returns a valid
        // result so don't use it in a prod env...
        var y = argObj.yyyy,
            a=y%4,
            b=y%7,
            c=y%19,
            d=(19*c+15)%30,
            e=(2*a+4*b-d+34)%7,
            m=Math.floor((d+e+114)/31),
            g=(d+e+114)%31+1,            
            yyyymmdd = y + "0" + m + String(g < 10 ? "0" + g : g);         
        
        datePickerController.addDisabledDates(argObj.id, yyyymmdd); 
        
        // The redraw callback expects an Object as a return value
        // so we just give it an empty Object... 
        return {};
};

/* 

   The following functions updates a span with an "English-ised" version of the
   currently selected date for the last datePicker on the page. 
   
   NOTE: These functions are not needed, they are only present to show you how you
   might use callback functions to use the selected date in other ways!
   
*/
function createSpanElement(argObj) {
        // Make sure the span doesn't exist already
        if(document.getElementById("EnglishDate")) return;

        // create the span node dynamically...
        var spn = document.createElement('span');
            p   = document.getElementById(argObj.id).parentNode;
            
        spn.id = "EnglishDate";
        p.parentNode.appendChild(spn);
        
        // Remove the bottom margin on the input's wrapper paragraph
        p.style.marginBottom = "0";
        
        // Add a whitespace character to the span
        spn.appendChild(document.createTextNode(String.fromCharCode(160)));
};

function showEnglishDate(argObj) {
        // Grab the span & get a more English-ised version of the selected date
        var spn = document.getElementById("EnglishDate"),
            formattedDate = datePickerController.printFormattedDate(argObj.date, "l-cc-sp-d-S-sp-F-sp-Y", false);
        
        // Make sure the span exists before attempting to use it!
        if(!spn) {
                createSpanElement(argObj); 
                spn = document.getElementById("EnglishDate");
        };
        
        // Note: The 3rd argument to printFormattedDate is a Boolean value that 
        // instructs the script to use the imported locale (true) or not (false)
        // when creating the dates. In this case, I'm not using the imported locale
        // as I've used the "S" format mask, which returns the English ordinal
        // suffix for a date e.g. "st", "nd", "rd" or "th" and using an
        // imported locale would look strange if an English suffix was included
        
        // Remove the current contents of the span
        while(spn.firstChild) spn.removeChild(spn.firstChild);
        
        // Add a new text node containing our formatted date
        spn.appendChild(document.createTextNode(formattedDate));
};

// ]]>
</script>
</head>
<body>
<form id="testform" method="post" action="">
  <h1>Unobtrusive JavaScript date-picker widgit</h1>
  <div class="warning">
    <p>Remember folks, this is a testpage for a <em>beta version</em> of the datePicker script. Expect bugs, console errors and crying children - in fact, just try to expect the unexpected.</p>
  </div>
  <h2>Keyboard access</h2>
  <p><strong>Note:</strong> All keyboard shortcuts are from the <a href="http://dev.aol.com/dhtml_style_guide#datepicker">The DHTML Style Guide Working Group (DSGWG)</a> recommendations.</p>
  
  <table cellpadding="0" cellspacing="0" border="0" id="fd-dp-aria-describedby">
      <thead>
        <tr>
          <th class="firstup">Key&#160;Combination</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><kbd>&larr;</kbd> <kbd>&rarr;</kbd> <kbd>&uarr;</kbd> <kbd>&darr;</kbd></td>
          <td>Day navigation</td> 
        </tr>
        <tr>
          <td><kbd>page up</kbd></td>
          <td>Previous month</td>
        </tr>
        <tr>
          <td><kbd>page down</kbd></td> 
          <td>Next month</td>
        </tr>
        <tr>
          <td><kbd>Ctrl</kbd> + <kbd>page up</kbd></td>
          <td>Previous year</td>
        </tr>
        <tr>
          <td><kbd>Ctrl</kbd> + <kbd>page down</kbd></td>
          <td>Next year</td>
        </tr>          
        <tr>
          <td><kbd>Space</kbd></td>
          <td>Todays date</td>
        </tr>
        <tr>
          <td><kbd>Esc</kbd></td>
          <td>Close date-picker (no date selected)</td>
        </tr>
        <tr>
          <td><kbd>Return</kbd></td>
          <td>Select highlighted date and close date-picker</td>
        </tr>
        <tr>
          <td><kbd>2</kbd> - <kbd>7</kbd></td>
          <td>Select the corresponding day as the first day of the week</td>
        </tr>
      </tbody>
    </table>
    <h2>DatePicker Demos</h2>
    
    <fieldset>
      <legend>Single Input DatePickers</legend>

      <p>A simple datePicker <em>(don&#8217;t be scared of the <code>dateformat</code> class, it&#8217;s easier to create than you think)</em> :</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y&#8221;</code></p>
      <label for="dp-1">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y" id="dp-1" name="dp-1" value="" /></p>

      <p class="fauxhr">OK, the same datepicker as above but now let&#8217;s show some week numbers:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y <strong>show-weeks</strong>&#8221;</code></p>
      <label for="dp-2">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks" id="dp-2" name="dp-2" value="" /></p>

      <p class="fauxhr">Add a status bar:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y show-weeks <strong>statusformat-l-cc-sp-d-S-sp-F-sp-Y</strong>&#8221;</code></p>
      <label for="dp-3">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y" id="dp-3" name="dp-3" value="" /></p>

      <p class="fauxhr">Let&#8217;s highlight Monday &amp; Tuesday:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y <strong>highlight-days-12</strong>&#8221;</code></p>
      <label for="dp-4">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y highlight-days-12" id="dp-4" name="dp-4" value="" /></p>

      <p class="fauxhr">Now set a top &amp; bottom range:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y <strong>range-low-5-week range-high-1-year</strong>&#8221;</code></p>
      <label for="dp-5">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y highlight-days-67 range-low-5-week range-high-1-year" id="dp-5" name="dp-5" value="" /></p>

      <p class="fauxhr">Let&#8217;s disable the drag &amp; drop functionality:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y <strong>disable-drag</strong>&#8221;</code></p>
      <label for="dp-6">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y disable-drag" id="dp-6" name="dp-6" value="" /></p>

      <p class="fauxhr">Let&#8217;s fill the entire grid with selectable dates:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y highlight-days-67 <strong>fill-grid</strong>&#8221;</code></p>
      <label for="dp-7">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y highlight-days-67 fill-grid" id="dp-7" name="dp-7" value="" /></p>

      <p class="fauxhr">Let&#8217;s fill the entire grid again but we&#8217;ll disable the selection of the extra dates:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y disable-drag <strong>fill-grid-no-select</strong>&#8221;</code></p>
      <label for="dp-8">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y fill-grid-no-select" id="dp-8" name="dp-8" value="" /></p>

      <p class="fauxhr">Let&#8217;s set a bespoke final opacity of 80%:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y <strong>opacity-80</strong>&#8221;</code></p>
      <label for="dp-9">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y opacity-80" id="dp-9" name="dp-9" value="" /></p>

      <p class="fauxhr">Let&#8217;s now disable the fade in/out animation:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y <strong>no-animation</strong>&#8221;</code></p>
      <label for="dp-10">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y no-animation" id="dp-10" name="dp-10" value="" /></p>

      <p class="fauxhr">Just for fun, let&#8217;s now disable some specific dates:</p>
      <p><code>class=&#8220;dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y <strong>disable-xxxx1225 disable-20070201-20070222</strong>&#8221;</code></p>
      <label for="dp-11">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y highlight-days-67 disable-xxxx1225 disable-20070201-20070222" id="dp-11" name="dp-11" value="" /></p>

      <p class="fauxhr">Now we&#8217;ll enable a few of the dates we&#8217;ve just disabled (enabled dates take preference over disabled dates):</p>
      <p><code>class=&#8220;dateformat-l-cc-sp-d-S-sp-M-sp-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y disable-xxxx1225 disable-20070201-20070222 <strong>enable-20070205-20070209</strong>&#8221;</code></p>
      <label for="dp-12">Date :</label>
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y disable-xxxx1225 disable-20070201-20070222 enable-20070205-20070209" id="dp-12" name="dp-12" value="" /></p>

      <p class="fauxhr">Now we&#8217;ll set a more complicated dateformat (which you probably wouldn&#8217;t use in a real life situation but it will at least test the script&#8217;s ability to parse complicated dates):</p>
      <p><code>class=&#8220;<strong>dateformat-l-cc-sp-d-S-sp-F-sp-Y</strong> show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y&#8221;</code></p>
      <label for="dp-13">Date</label> :
      <p><input type="text" class="w16em dateformat-l-cc-sp-d-S-sp-F-sp-Y show-weeks statusformat-l-cc-sp-d-S-sp-F-sp-Y" id="dp-13" name="dp-13" value="" /></p>

    </fieldset>
    
    <fieldset>
      <legend>Split Input DatePickers</legend>
      <p>Using three text inputs and disabling the today button:</p>
      <p><code>class="split-date fill-grid statusformat-l-cc-sp-d-S-sp-F-sp-Y show-weeks <strong>no-today-button</strong>"</code></p>
      <!--
      Standards evangelists beware, I'm using a table for layout...
      Please send all comments/suggestions to itsOnlyABleedenDemoSoPleaseChillOut@frequency-decoder.com
      !-->
      <table class="split-date-wrap" cellpadding="0" cellspacing="0" border="0">
        <tbody>
          <tr>
            <td><input type="text" class="w2em" id="date-1-dd" name="date-1-dd" value="" maxlength="2" />/<label for="date-1-dd">DD</label></td>
            <td><input type="text" class="w2em" id="date-1-mm" name="date-1-mm" value="" maxlength="2" />/<label for="date-1-mm">MM</label></td>
            <td class="lastTD"><input type="text" class="w4em split-date fill-grid statusformat-l-cc-sp-d-S-sp-F-sp-Y show-weeks no-today-button" id="date-1" name="date-1" value="" maxlength="4" /><label for="date-1">YYYY</label></td>
          </tr>
        </tbody>
      </table>  
      <p class="fauxhr">Using three text inputs &amp; positioning the button within a wrapper span:</p>
      <p><code>class="split-date statusformat-l-cc-sp-d-S-sp-F-sp-Y show-weeks <strong>button-butt-wrapper</strong>"</code></p>
      
      <table class="split-date-wrap" cellpadding="0" cellspacing="0" border="0">
        <tbody>
          <tr>
            <td><input type="text" class="w4em split-date statusformat-l-cc-sp-d-S-sp-F-sp-Y show-weeks button-butt-wrapper" id="date-2" name="date-2" value="" maxlength="4" />/<label for="date-2">YYYY</label></td>
            <td><input type="text" class="w2em" id="date-2-mm" name="date-2-mm" value="" maxlength="2" />/<label for="date-2-mm">MM</label></td>
            <td><input type="text" class="w2em" id="date-2-dd" name="date-2-dd" value="" maxlength="2" style="margin-right:0" /><span id="butt-wrapper"></span><label for="date-2-dd">DD</label></td>
          </tr>
        </tbody>
      </table>  
         
      <p class="fauxhr">Using 3 selectLists:</p>
      <p><code>class="disable-days-12 split-date range-low-19600213"</code></p>
      <p><strong>Note:</strong> I&#8217;ve set the lower limit of the datePicker to be (ten years) lower than the lowest possible year you can select using the year selectList in order to test the automatic resetting of the lower/higher date ranges i.e. the year selectList starts at 1970 but the className defined range has been stipulated as 1960; the datePicker should automatically reset the range to be <code>range-low-<strong>1970</strong>-02-13</code>.</p>
      <p>
        <select id="date-sel-dd" name="date-sel-dd">
          <option value="-1">Day</option>
          <option value="1">1st</option>
          <option value="2">2nd</option>
          <option value="3">3rd</option>
          <option value="4">4th</option>
          <option value="5">5th</option>
          <option value="6">6th</option>
          <option value="7">7th</option>
          <option value="8">8th</option>
          <option value="9">9th</option>
          <option value="10">10th</option>
          <option value="11">11th</option>
          <option value="12">12th</option>
          <option value="13">13th</option>
          <option value="14">14th</option>
          <option value="15">15th</option>
          <option value="16">16th</option>
          <option value="17">17th</option>
          <option value="18">18th</option>
          <option value="19">19th</option>
          <option value="20">20th</option>
          <option value="21">21st</option>
          <option value="22">22nd</option>
          <option value="23">23rd</option>
          <option value="24">24th</option>
          <option value="25">25th</option>
          <option value="26">26th</option>
          <option value="27">27th</option>
          <option value="28">28th</option>
          <option value="29">29th</option>
          <option value="30">30th</option>
          <option value="31">31st</option>
        </select>
        <select id="date-sel-mm" name="date-sel-mm">
          <option value="-1">Month</option>
          <option value="1">January</option>
          <option value="2">February</option>
          <option value="3">March</option>
          <option value="4">April</option>
          <option value="5">May</option>
          <option value="6">June</option>
          <option value="7">July</option>
          <option value="8">August</option>
          <option value="9">September</option>
          <option value="10">October</option>
          <option value="11">November</option>
          <option value="12">December</option>
        </select>
        <select class="split-date range-low-19600213" id="date-sel" name="date-sel">
          <option value="-1">Year</option>
          <option value="1970">1970</option>
          <option value="1971">1971</option>
          <option value="1972">1972</option>
          <option value="1973">1973</option>
          <option value="1974">1974</option>
          <option value="1975">1975</option>
          <option value="1976">1976</option>
          <option value="1977">1977</option>
          <option value="1978">1978</option>
          <option value="1979">1979</option>
          <option value="1980">1980</option>
          <option value="1981">1981</option>
          <option value="1982">1982</option>
          <option value="1983">1983</option>
          <option value="1984">1984</option>
          <option value="1985">1985</option>
          <option value="1986">1986</option>
          <option value="1987">1987</option>
          <option value="1988">1988</option>
          <option value="1989">1989</option>
          <option value="1990">1990</option>
        </select>
      </p>
    
      <p>Using a mixture of text input and selectLists:</p>
      <p><code>class="split-date"</code></p>
      <div id="select-wrapper">
        <select id="date-sel2-dd" name="date-sel2-dd">
          <option value="day">Day</option>
          <option value="1">1st</option>
          <option value="2">2nd</option>
          <option value="3">3rd</option>
          <option value="4">4th</option>
          <option value="5">5th</option>
          <option value="6">6th</option>
          <option value="7">7th</option>
          <option value="8">8th</option>
          <option value="9">9th</option>
          <option value="10">10th</option>
          <option value="11">11th</option>
          <option value="12">12th</option>
          <option value="13">13th</option>
          <option value="14">14th</option>
          <option value="15">15th</option>
          <option value="16">16th</option>
          <option value="17">17th</option>
          <option value="18">18th</option>
          <option value="19">19th</option>
          <option value="20">20th</option>
          <option value="21">21st</option>
          <option value="22">22nd</option>
          <option value="23">23rd</option>
          <option value="24">24th</option>
          <option value="25">25th</option>
          <option value="26">26th</option>
          <option value="27">27th</option>
          <option value="28">28th</option>
          <option value="29">29th</option>
          <option value="30">30th</option>
          <option value="31">31st</option>
        </select>
        <select id="date-sel2-mm" name="date-sel2-mm">
          <option value="-1">Month</option>
          <option value="1">January</option>
          <option value="2">February</option>
          <option value="3">March</option>
          <option value="4">April</option>
          <option value="5">May</option>
          <option value="6">June</option>
          <option value="7">July</option>
          <option value="8">August</option>
          <option value="9">September</option>
          <option value="10">October</option>
          <option value="11">November</option>
          <option value="12">December</option>
        </select>
        <input type="text" class="w3em split-date" id="date-sel2" name="date-sel2" />
      </div>
    </fieldset>
    <fieldset>
      <legend>Single Input in-line DatePickers</legend>   

      <p>A simple datePicker:</p>
      <p><code>class=&#8220;display-inline dateformat-Y-ds-m-ds-d&#8221;</code></p>       
      <label for="dp-s1">Date</label> :
      <div><input type="text" class="w18em display-inline dateformat-Y-ds-m-ds-d" id="dp-s1" name="dp-s1" value="" /></div>

      <p class="fauxhr">OK, the same datepicker as above but now let&#8217;s show some week numbers, add a status bar and set a top and bottom range:</p>
      <p><code>class=&#8220;display-inline dateformat-Y-ds-m-ds-d <strong>show-weeks range-low-1-week range-high-1-month statusformat-l-cc-sp-d-S-sp-F-sp-Y</strong>&#8221;</code></p>
      <label for="dp-s2">Date</label> :
      <div><input type="text" class="w18em display-inline dateformat-Y-ds-m-ds-d show-weeks range-low-1-week range-high-1-month statusformat-l-cc-sp-d-S-sp-F-sp-Y" id="dp-s2" name="dp-s2" value="" /></div>

    </fieldset>
    <fieldset>
      <legend>Disable/enable demos</legend>       

      <label for="dp-de1">Date</label> :
      <p>Testing to see if the activation button has been automatically disabled (as the associated form element is disabled):</p>
      <p><input type="text" disabled="disabled" class="w16em dateformat-d-sl-m-sl-Y" id="dp-de1" name="dp-de1" value="" /></p>

      <p class="fauxhr">Testing to see how a popup datePicker reacts to dynamic disabling/enabling:</p>
      <label for="dp-de2">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y" id="dp-de2" name="dp-de2" value="" /></p> 
      <button onclick="datePickerController.disable('dp-de2'); return false;">Disable</button>
      <button onclick="datePickerController.enable('dp-de2'); return false;">Enable</button>           

      <p class="fauxhr">Testing to see how an inline datePicker reacts to dynamic disabling/enabling:</p>
      <label for="dp-de3">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y show-weeks display-inline" id="dp-de3" name="dp-de3" value="" /></p>
      <button onclick="datePickerController.disable('dp-de3'); return false;">Disable</button>
      <button onclick="datePickerController.enable('dp-de3'); return false;">Enable</button>           

    </fieldset> 
    <fieldset>
      <legend>Callback function demos</legend>       
      <p>A simple datePicker with a callback function <code>disableEasterMonday</code> defined for the redraw event (that dynamicaly calculates Easter Monday for the given year and disables that date in question - view the page source to see the function in question):</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y <strong>cb_redraw_disableEasterMonday</strong>&#8221;</code></p>
      <label for="dp-cb1">Date</label> :

      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y cb_redraw_disableEasterMonday" id="dp-cb1" name="dp-cb1" value="" /></p>
      <p class="fauxhr">A simple datePicker with two callback functions <code>createSpanElement</code> (defined for the create event) and <code>showEnglishDate</code> (defined for the dateselect event) that use the <code>datePickerController.parseDate</code> method to return a more natural English language date which is then rewritten under the associated input - view the page source to see the two functions in question:</p>
      <p><code>class=&#8220;dateformat-d-sl-m-sl-Y <strong>cb_create_createSpanElement cb_dateselect_showEnglishDate</strong>&#8221;</code></p>
      <label for="dp-cb2">Date</label> :
      <p><input type="text" class="w16em dateformat-d-sl-m-sl-Y cb_create_createSpanElement cb_dateselect_showEnglishDate" id="dp-cb2" name="dp-cb2" value="" /></p>      
    </fieldset>
    <p class="al-center">View the related &#8220;<a href="http://www.frequency-decoder.com/2009/02/03/unobtrusive-date-picker-widget-v4/">language in the lab</a>&#8221; post for this demo.</p>
</form>
</body>
</html>

